<template>
  <div
    style="width: 100%; height: 100%"
    class="q-pa-sm column captions-panel golden-layout-panel"
  >
    <div class="body column col q-pa-sm">
      <div class="search-box row justify-center items-center q-ma-sm no-warp">
        <q-input
          v-model="searchString"
          dense
          rounded
          standout
          class="col q-mr-md"
          :label="$t('studio.captionPanel.searchCaption')"
        >
          <template v-slot:prepend>
            <q-icon name="search" />
          </template>
        </q-input>
        <div class="row justify-center items-center">
          <q-avatar size="28px">
            <img src="/images/default-avatar.png" />
          </q-avatar>
          <div style="font-size: 10px; background-color: black; padding: 3px">
            {{ $t('common.lang.en-US') }}
          </div>
        </div>
      </div>
      <q-scroll-area class="col" id="scroller-container">
        <q-virtual-scroll
          ref="scroller"
          component="q-list"
          :items="cueList"
          scroll-target="scroller-container"
          separator
        >
          <template v-slot="{ item }">
            <q-item
              :key="item.id"
              bordered
              v-ripple
              :active="item.id == currentCaptionId"
              active-class="active-caption"
            >
              <q-item-section side>
                <q-item-label caption>{{ item.startTimeStr }}</q-item-label>
                <!-- <q-item-label caption>{{ item.endTimeStr }}</q-item-label> -->
              </q-item-section>
              <q-item-section>
                <q-item-label>{{ item.text }}</q-item-label>
              </q-item-section>
            </q-item>
          </template>
        </q-virtual-scroll>
      </q-scroll-area>
    </div>
  </div>
</template>
<script setup lang="ts">
import { computed, watch, ref } from 'vue';
import { useQuasar, QVirtualScroll } from 'quasar';
import { useVideoStore } from 'src/stores/video-store.js';
const $q = useQuasar();
const videoStore = useVideoStore();
const scroller = ref<QVirtualScroll>();
const searchString = ref('');
const cueList = computed(() => videoStore.captionList);
const currentCaptionId = computed(() => videoStore.currentCaptionId);
watch(currentCaptionId, () => {
  if (currentCaptionId.value !== '') {
    scroller.value?.scrollTo(currentCaptionId.value, 'center-force');
  }
});
</script>
<style lang="sass" scoped>

.captions-panel
  .title
    font-size: 10px
    border-top: 1px solid #fff
    background-color: #1c1c1c
  .body
    background-color: #1c1c1c
  .active-caption
    color: $accent
</style>
